import React,{PureComponent} from 'react';
import { DetailBox } from '../styled';

class detailWarp extends PureComponent {
  render() {
    let { name, grade, filmType, nation, category, runtime, synopsis } = this.props.data;
    return (
      <DetailBox>
        <div className="detailname">
          <span className='title'>{name}</span>
          <span className='type'>{ filmType?filmType.name:'' }</span>
          <span className='grade'>
            {
              grade?(<><span className='grade-num'>{ grade }</span>
              <span className='grade-text'>分</span></>) :<></>
            }
          </span>
        </div>
        <div className='detailtype'>{ category }</div>
        <div className='releasetime'>上映时间</div>
        <div className='addresstime' >{nation}&nbsp;&nbsp;|&nbsp;&nbsp;{ runtime }分钟</div>
        <div className='detailinner'>
          {synopsis}
        </div>
      </DetailBox>
    );
  }
}

export default detailWarp;